<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>MD Project Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .project-list {
            margin: 20px 0;
        }
        .project-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            margin: 5px 0;
        }
        .project-item:hover {
            background-color: #f9f9f9;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Markdown多人协作联系平台</h1>
        <div id="projectList" class="project-list"></div>
    </div>

    <script>
        // 获取项目列表
        async function getProjects() {
            try {
                const response = await fetch('/api/projects');
                const data = await response.json();
                displayProjects(data.projects);
            } catch (error) {
                console.error('Error fetching projects:', error);
            }
        }

        // 显示项目列表
        function displayProjects(projects) {
            const projectList = document.getElementById('projectList');
            projectList.innerHTML = '';
            
            projects.forEach(project => {
                const div = document.createElement('div');
                div.className = 'project-item';
                div.innerHTML = `
                    <span>${project}</span>
                    <button onclick="joinProject('${project}')">加入</button>
                `;
                projectList.appendChild(div);
            });
        }

        // 加入项目
        async function joinProject(project) {
            const password = prompt('请输入项目密码：');
            if (!password) return;

            try {
                const response = await fetch('/api/join', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        project,
                        password
                    })
                });

                const data = await response.json();
                if (data.success) {
                    // 保存项目信息到 localStorage
                    localStorage.setItem('currentProject', project);
                    localStorage.setItem('projectPassword', password);
                    // 跳转到编辑器页面
                    window.location.href = '/mdeditor.html';
                } else {
                    alert(data.message || '密码错误！');
                }
            } catch (error) {
                console.error('Error joining project:', error);
                alert('加入项目失败！');
            }
        }

        // 页面加载时获取项目列表
        window.onload = getProjects;
    </script>
</body>
</html>
